import { defineStore } from 'pinia';
import { store } from '@/store/index';

interface anvilCodeState {
  page: Array<anvilCodeForm>;
  util: anvilUtil;
  data: anvilCodeData;
}

// 表单存储的数据结构
interface anvilCodeForm {
  pageId: string; // 一个pageId对应一个表单，具有唯一性
  instance: unknown; // 保存表单实例的地方
  components: Array<anvilCodeComponent>;
}

interface anvilCodeComponent {
  uuid: string; // 组件唯一标识
  instance: unknown; // 保存组件实例的地方
  prop: string;
}

interface anvilCodeData {
  pageId: string;
}

interface anvilUtil {
  spaUniCode: string; //用于存储单页应用唯一字符串
}

type getInstanceType = 'form' | 'component';

export const useAnvilCodeStore = defineStore('anvilCode', {
  state: (): anvilCodeState => {
    return {
      page: [],
      util: {
        spaUniCode: '' // 用于存储单页应用唯一字符串
      },
      data: {
        pageId: ''
      }
    };
  },
  getters: {
    getCurPageForm(): anvilCodeForm | undefined {
      return this.page.find((form) => form.pageId == this.data.pageId);
    },
    getCurPageInstance(): unknown {
      return this.getCurPageForm ? this.getCurPageForm.instance : undefined;
    },
    getPageId(): string {
      return this.data.pageId;
    },
    getSpaUniCode(): string {
      return this.util.spaUniCode;
    }
  },
  actions: {
    setPageId(value: string) {
      this.data.pageId = value;
    },
    setPageForm(page: anvilCodeForm) {
      // 每次挂载form都需要重新渲染一下，避免组件数据过多
      const isExistIndex = this.page.findIndex((form) => form.pageId == page.pageId);
      if (isExistIndex > -1) {
        this.page.splice(isExistIndex, 1, page);
      } else {
        this.page.push(page);
      }
    },
    setPageComponent(pageId: string, component: anvilCodeComponent) {
      const form = this.page.find((form) => form.pageId == pageId);
      if (!form) {
        return;
      }
      form?.components.push(component);
    },
    setUniqPageComponent(pageId: string, component: anvilCodeComponent) {
      const form = this.page.find((form) => form.pageId == pageId);
      if (!form) {
        return;
      }
      if (form?.components.find((comp) => comp.uuid == component.uuid)) {
        return;
      } else {
        form?.components.push(component);
      }
    },
    getPageForm(pageId: string) {
      return this.page.find((form) => form.pageId == pageId);
    },
    getPageComponent(pageId: string, uuid: string) {
      const form = this.getPageForm(pageId);
      if (!form) {
        return;
      }
      const comps = form?.components.filter((component) => component.uuid == uuid);
      if (Object.prototype.toString.call(comps) == '[object Array]' && comps?.length == 1) {
        return comps[0];
      } else {
        return comps;
      }
    },
    getInstance(pageId: string, type: getInstanceType, uuid: string) {
      try {
        // 找到表单实例
        if (type == 'form') {
          const form = this.getPageForm(uuid) as anvilCodeForm;
          return form ? form.instance : undefined;
        } else if (type == 'component') {
          // 找到组件实例
          const data = this.getPageComponent(pageId, uuid) as anvilCodeComponent | anvilCodeComponent[];
          if (!data) {
            return;
          }
          if (Object.prototype.toString.call(data) == '[object Array]') {
            return (data as anvilCodeComponent[]).map((c) => c.instance);
          } else {
            const { instance } = data;
            return instance;
          }
        }
      } catch (e) {
        console.log(e);
        return;
      }
    },
    // 在页面上调用所有方法时默认携带的表单参数，包括当前路由参数和表单所有字段
    getDefaultParams(pageId: string, instance: any) {
      const { query } = instance.$route;
      const form = this.getPageForm(pageId) as anvilCodeForm;
      if (!form) {
        return { ...query };
      }
      const formData = form.instance?.getFormData();

      return {
        ...query,
        ...formData
      };
    },
    setSpaUniCode(code: string) {
      if (!this.util.spaUniCode) {
        this.util.spaUniCode = code;
      }
    }
  }
});

export const useAnvilCodeStoreWithOut = () => {
  return useAnvilCodeStore(store);
};
